<layout name="page" />
<block name="content">
	<link rel="stylesheet" href="layui/css/kf.css" media="all">
	<div class="row x1 wrap" style="padding:0px;">
		{:widget('page_header/simple',array('name'=>'报案处理'))}
		<div class="operate-panel">
			<a class="btn btn-link active hidden" onclick="todo_list()">待处理<span class="t_count hidden" id="todo_count"></span></a>
			<a class="btn btn-link  hidden" onclick="index()">处理中<span class="t_count hidden" id="index_count"></span></a>
			<a class="btn btn-link hidden" onclick="finish_list()">已完成</a>
			<div class="mid"></div>
			<a class="btn btn-normal" onclick="notify()">微信提醒</a>
			<a class="btn btn-normal" onclick="let_me_do()">我来处理</a>
			<a class="btn btn-normal" onclick="mark_finish()">标记为已完成</a>
		</div>
		<div class="x1 sub box">
			<div class="w28 m100 frame" style="max-height:700px;overflow-y: auto;background: #D9D9D9;">
				<div class="tree-menu">
					<div id="talk_list">
						<foreach name="talk_list" val="talk">
							<div class="chat-user" data="{$talk.id}">
								<img class="chat-avatar" src="uploads/mp/avatar/{$talk.from_user_name}.jpg" alt="" >
								<span class="chat-user-name">{$talk.nickname}</span>
								<span class="new_count hidden"></span>
							</div>
						</foreach>
					</div>
				</div>
			</div>
			<div style="width:16px;"></div>
			<div class="x1 frame m100" style="height:700px;">
				<div class="content-wrap" style="height:670px;margin-bottom: 10px;overflow-y: scroll" id="content_wrap"></div>
			</div>
		</div>
	</div>
	<div id="tpl" class="hidden">
		<div class="chat-user" data="{talk_id}">
			<img class="chat-avatar" src="uploads/mp/avatar/{from_user_name}.jpg" alt="" >
			<span class="chat-user-name">{nickname}</span>
			<span class="new_count hidden"></span>
		</div>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		layui.use(['global', 'uploader', 'editor', 'badge'], function() {
			var badge = layui.badge;
			var fn = {
				index : function() {
					window.open('{:url("index")}', '_self');
				},
				todo_list : function() {
					window.open('{:url("todo")}', '_self');
				},
				finish_list : function() {
					window.open('{:url("finish")}', '_self');
				},
				hb_list : function() {
					window.open('{:url("hb_list")}', '_self');
				},
				let_me_do : function() {
					$talk_id = $('#talk_list .chat-user.active').attr('data');
					if ($talk_id == undefined) {
						layer.msg('请选择人员');
						return false;
					}
					var vars = {};
					vars.talk_id = $talk_id;
					send_ajax('{:url("let_me_do")}', vars, function(ret) {
						if (ret.status) {
							layer.msg(ret.info, {
								time : 1200
							}, function() {
								//location.reload(true);
								set_cookie('current_node', 256);
								location.href = "{:url('kf/index')}";
							});
						}
					});
				},
				notify : function() {
					winopen("{:url('notify',array('type'=>1))}", 560, 470);
				},
				mark_finish : function() {
					$talk_id = $('#talk_list .chat-user.active').attr('data');
					if ($talk_id == undefined) {
						layer.msg('请选择人员');
						return false;
					}
					var vars = {};
					vars.talk_id = $talk_id;
					send_ajax('{:url("mark_finish_from_todo")}', vars, function(ret) {
						if (ret.status) {
							layer.msg(ret.info, {
								time : 1200
							}, function() {
								location.reload(true);
							});
						}
					});
				},
				play_audio : function(obj) {
					var media_id = $(obj).attr('data-src');
					winopen("{:url('voice')}&media_id=" + media_id, 560, 470);
				},
				play_video : function(obj) {
					var media_id = $(obj).attr('data-src');
					winopen("{:url('video')}&media_id=" + media_id, 560, 470);
				},
			};
			win_exp(fn);

			$(document).on('click', '#talk_list .chat-user', function() {
				$('#talk_list .chat-user.active').removeClass('active');
				$this = $(this);
				$this.addClass('active');
				$talk_id = $this.attr('data');
				show_data($talk_id);
			});

			function show_data(talk_id) {
				var vars = {};
				vars.id = talk_id;
				send_ajax('{:url("get_talk_content")}', vars, function(ret) {
					html = '';
					for (s in ret) {
						if (ret[s].action_type == 'receive') {
							var content = '';
							if (ret[s].msg_type == 'text') {
								content = ret[s].content;
							}
							if (ret[s].msg_type == 'image') {
								content = '<img class="image" src="uploads/mp/image/' + ret[s].media_id + '.jpg" style="max-height:600px;max-width:600px;">';
							}
							if (ret[s].msg_type == 'location') {
								$latlng = JSON.parse(ret[s].location);
								content = ret[s].label + '<br><iframe class="map" src="{:url("map")}&latlng=' + $latlng.x + ',' + $latlng.y + '" style="min-height:450px;width:600px;"></iframe>';
							}
							if (ret[s].msg_type == 'voice') {
								content = '<div class="voice" onclick="play_audio(this)" data-src="' + ret[s].media_id + '"><i class="fa fa-wifi fa-rotate-90" aria-hidden="true"></i>音频</div>';
							}
							if (ret[s].msg_type == 'video') {
								$latlng = JSON.parse(ret[s].location);
								content = '<div class="video" onclick="play_video(this)" data-src="' + ret[s].media_id + '"><img src="uploads/mp/video/' + ret[s].thumb_media_id + '.jpg"><i class="fa fa-play-circle-o" ></i></div>';
							}
							html += parse_msg_receive(ret[s].nickname, ret[s].create_time, ret[s].from_user_name, content);
						} else {
							var content = '';
							if (ret[s].msg_type == 'text') {
								content = ret[s].content;
							}
							if (ret[s].msg_type == 'image') {
								content = '<img class="image" src="' + ret[s].pic_url + '" style="max-height:600px;max-width:600px;">';
							}
							html += parse_msg_send(ret[s].user_name, ret[s].create_time, './uploads/avatar/' + ret[s].emp_no + '.png', content);
						}
					}
					$("#content_wrap").html(html);
					setTimeout(function() {
						$('#content_wrap').scrollTop(100000);
					}, 100);
				});
			}

			//解析消息发送样式
			function parse_msg_receive(user, time, avatar, message) {
				var _html = '<div class="chat-message">';
				_html += '<div class="message-user">';
				_html += '<img class="message-avatar" src="uploads/mp/avatar/' + avatar + '.jpg" alt="">';
				_html += '<span class="message-date"> ' + user + '&nbsp;&nbsp;&nbsp;' + int_to_date(time, 'MM-dd hh:mm:ss') + '</span>';
				_html += '</div>';
				_html += '<div class="message">' + message + '</div></div>';

				return _html;
			}

			function parse_msg_send(user, time, avar, message) {
				var _html = '<div class="chat-message send">';
				_html += '<div class="message-user">';
				_html += '<span class="message-date"> ' + int_to_date(time, 'MM-dd hh:mm:ss') + ' ' + user + '</span>';
				_html += '<img class="message-avatar" src="' + avar + '" alt="">';
				_html += '</div>';
				_html += '<div class="message">' + message + '</div></div>';

				return _html;
			}

			function new_msg(msg) {
				badge.get_badge_count();
				total = 0;
				send_ajax('{:url("get_new_msg_count")}', {}, function(ret) {
					console.log(ret);
					for (s in ret) {
						if (ret[s] > 0) {
							total += parseInt(ret[s]) * 1;
							$("#talk_list .chat-user[data='" + s + "'] .new_count").text(ret[s]);
							$("#talk_list .chat-user[data='" + s + "'] .new_count").removeClass('hidden');
						}
					}
				});
			}

			function new_todo(msg) {
				badge.get_badge_count();
				var total = 0;
				//没有需要处理的会话
				if (msg !== undefined) {
					if ($("#talk_list .chat-user").length == 0) {
						send_ajax('{:url("get_vistor_info")}', {
							'openid' : msg.from_user_name
						}, function(ret) {
							console.log(ret);
							$html = $('#tpl').html();
							$html = tpl_parse($html, 'talk_id', msg.talk_id);
							$html = tpl_parse($html, 'from_user_name', ret.openid);
							$html = tpl_parse($html, 'nickname', ret.nickname);
							$('#talk_list').append($html);
						})
					} else {
						$talk_id = $("#talk_list .active").attr('data');
						if ($talk_id == msg.talk_id) {
							show_data($talk_id);
						};
					}
				}

				send_ajax('{:url("get_new_todo_count")}', {}, function(ret) {
					for (s in ret) {
						total += ret[s] * 1;
						$("#talk_list .chat-user[data='" + s + "'] .new_count").text(ret[s]);
						$("#talk_list .chat-user[data='" + s + "'] .new_count").removeClass('hidden');
					}
				});
			}

			var ws = {
				count : 0,
				retry : 10,
				server : document.domain,
				port : 1001,
				inited : 0,
				socket : null,
				bind_url : '{:url("bind")}',
				connect : function() {
					ws.socket = new WebSocket('ws://' + ws.server + ':' + ws.port);
					ws.socket.onopen = function() {
						console.log('1-> 握手');
						console.log('2-> 发送初始化');
						var request = {};
						request.type = 'init';
						ws.send(request);
					};
					ws.socket.onmessage = function(ret) {
						var msg = JSON.parse(ret.data);
						console.log(msg);
						switch(msg.type) {
						case 'init':
							ws.init(msg);
							return;

						case 'online':
							ws.online(msg);
							return;

						case 'new_todo':
							new_todo(msg);
							return;

						case 'new_msg':
							new_msg(msg);
							return;

						case 'notify':
							return;

						case 'message':
							console.log(msg);
							return;
						}
					};
					ws.socket.onclose = function() {
						ws.count++;
						if (ws.retry > ws.count) {
							ws.connect();
						}
					};
					ws.socket.onerror = function() {
						ws.count++;
						if (ws.retry > ws.count) {
							ws.connect();
						};
					};
				},
				send : function(data) {
					console.log(data);
					if (this.socket && this.socket.readyState == 1) {
						this.socket.send(JSON.stringify(data));
					}
				},
				send_heat_beat : function() {
					var request = {};
					request.type = 'ping';
					if (this.socket && this.socket.readyState == 1) {
						this.socket.send(JSON.stringify(request));
					}
				},
				init : function(ret) {
					console.log('3-> 接受client_id');
					console.log(ret);
					$.post(ws.bind_url, ret, function(ret) {
						console.log(ret);
					});

					setInterval(function() {
						ws.send_heat_beat();
					}, 12000);
				},
				online : function(ret) {
					console.log(ret);
				}
			};

			ws.server = document.domain;
			ws.port = 8282;
			ws.connect();
		});
	</script>
</block>